<template>
	<div style="width: 100%;">
		<PDF
			v-if="type == 'pdf'"
			:src="PdfSrc"
			@onComplete="loading = false"
			v-loading="loading"
			element-loading-text="初始化数据中..."
			element-loading-svg-view-box="-10, -10, 50, 50"
			element-loading-background="rgba(122, 122, 122, 0.4)"
		/>
		<FileList v-else="type == 'img'" :src="imgUrl" :only-ready="true" :showFileList="true"> </FileList>
	</div>
</template>

<script setup lang="ts">
import { ref, watch, reactive, toRefs, onMounted } from 'vue'
import { DowloadPreviewImage } from '@/utils/util'
import FileList from '@/components/AplidCrud/src/AplidUpload/PreviewImg/index.vue'
import PDF from 'pdf-vue3'

type Props = {
	imgUrl?:any
}
let props = withDefaults(defineProps<Props>(),{
	imgUrl: '',
})
let PdfSrc = ref('')
let loading = ref(false)
let type = ref('pdf')
const getPreviewImage = async () => {
    try {
            loading.value = true
			if (props.imgUrl?.includes('ningxiang')) {
				const blobUrl = (await DowloadPreviewImage(props.imgUrl, 'blob')) as string
				const blobToDataURL = (blob) => {
					return new Promise((resolve, reject) => {
						const reader = new FileReader()
						reader.readAsDataURL(blob)
						reader.onload = () => resolve(reader.result)
						reader.onerror = (error) => reject(error)
					})
				}
				const url:any = await blobToDataURL(blobUrl)
				PdfSrc.value = url
			} else {
				PdfSrc.value = props.imgUrl
			}
		}catch{
            loading.value = false
        }
}
watch(
	() => props.imgUrl,
	(val) => {
		if (val) {
			let list = val.split('.')
			let ext = list[list.length - 1]
			if(ext=='pdf'){
				type.value = 'pdf'
			}else{
				type.value = 'img'
			}
            getPreviewImage()
		}
	},
	{
		immediate: true,
	}
)


</script>
<style scoped lang="scss"></style>
